<template>
  <div>
    <!-- <el-steps :active="1" finish-status="success" align-center simple>
      <el-step title="项目信息填报"></el-step>
      <el-step title="合同信息填报"></el-step>
      <el-step title="It资产信息填报"></el-step>
    </el-steps> -->
    <div class="title">
      <el-row :gutter="20">
        <el-col :span="18" :offset="0" v-if="pinfo">
          项目名：{{pinfo.pname}}
        </el-col>
        <el-col :span="6" :offset="0">
          <div class="right">
            <el-button type="primary" size="medium" @click="projectInfo">项目信息</el-button>
            <el-button type="primary" size="medium" @click="toBack">返回首页</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-form :model="searchList" :inline="false" size="normal">
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">
          <el-form-item label="">
            <el-input v-model="searchList.contract_name" placeholder="建设合同名称" :clearable="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="0">
          <el-form-item label="">
            <el-date-picker v-model="searchList.check_time" type="date" value-format="yyyy-MM-dd" placeholder="验收时间"
              :clearable="true" class="wid">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="0">
          <el-form-item label="">
            <el-date-picker v-model="searchList.end_time" type="date" value-format="yyyy-MM-dd"
              placeholder="最近一次运维合同结束时间" :clearable="true" class="wid">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="0">
          <div class="right">
            <el-button type="primary" size="medium" @click="search" :loading="saveLoading">查询</el-button>
            <el-button type="primary" size="medium" @click="addContract"
              v-if="this.switch && this.pinfo.copy_status!='0'">添加合同
            </el-button>
          </div>
        </el-col>
      </el-row>

    </el-form>
    <div>申请金额合计：{{titleData.apply_amount?titleData.apply_amount.toFixed(4):'0.0000'}}万元
    </div>
    <el-table :data="tableData" border stripe :height="offsetHeight" v-loading="loading">
      <el-table-column type="index" label="序号" width="50" align="center">
      </el-table-column>
      <el-table-column prop="contract_name" label="建设合同名称" align="center">
      </el-table-column>
      <el-table-column prop="contract_amount" label="建设合同金额" align="center" width="120">
      </el-table-column>
      <el-table-column label="验收时间" align="center" width="100">
        <template slot-scope="{row}">
          {{$util.formatDate(row.check_time)}}
        </template>
      </el-table-column>
      <el-table-column prop="" label="最近一次运维合同金额" align="center">
        <template slot-scope="{row}">
          <span v-if="row.first_apply ==0">{{row.amount||''}}</span>
        </template>
      </el-table-column>
      <el-table-column label="最近一次运维截止时间" align="center">
        <template slot-scope="{row}">
          {{$util.formatDate(row.end_time)}}
        </template>
      </el-table-column>
      <el-table-column prop="service_pre_amount_sum" label="申请金额" align="center" width="100">
      </el-table-column>
      <el-table-column prop="" label="操作" align="center" width="350">
        <template slot-scope="{row}">
          <el-button-group>
            <el-button type="primary" size="mini" @click="contractInfo(row.id)">合同信息</el-button>
            <el-button type="primary" size="mini" @click="itInfo(row)">运维服务和资金需求信息</el-button>
            <el-button type="danger" size="mini" @click="remove(row.id)" v-if="tableSwitch">删除</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <!-- 项目信息 -->
    <el-drawer title="项目信息" :visible.sync="projectShow" size="70%" center :destroy-on-close="true"
      :wrapperClosable="false">
      <project-item :project-params="projectParams" :switch="this.switch" :copy-status="this.pinfo.copy_status"
        @cancel="cancel" @init="init"></project-item>
    </el-drawer>
    <!-- 合同信息 -->
    <el-drawer title="合同信息" :visible.sync="contractShow" size="70%" center :destroy-on-close="true"
      :wrapperClosable="false">
      <contract-item :contract-params="contractParams" :switch="this.switch" :copy-status="this.pinfo.copy_status"
        @cancel="cancel" @init="init">
      </contract-item>
    </el-drawer>
  </div>
</template>
<script>
import ProjectItem from '@/components/Project'
import ContractItem from '@/components/Contract'
export default {
  name: 'Contract',
  components: {
    ContractItem, ProjectItem
  },
  props: {
    switch: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      offsetHeight: document.documentElement.clientHeight - 335,
      pinfo: {},
      titleData: {},
      loading: false,
      saveLoading: false,
      searchList: {},
      tableData: [],
      projectShow: false,
      projectParams: {},
      contractShow: false,
      contractParams: {}
    }
  },
  created () {

  },
  mounted () {
    // this.init()
  },
  methods: {
    async init () {
      this.pinfo = JSON.parse(sessionStorage.getItem("inputInfo"));
      const res = await this.$http('findWholeList', {
        project_id: this.pinfo.pid
      })
      this.titleData = res
      this.loading = true
      const res1 = await this.$http('inputContractList', {
        del_flag: '0',
        project_id: this.pinfo.pid,
        ...this.searchList
      })
      this.tableData = res1
      this.loading = false
    },
    projectInfo () {
      this.projectShow = true
      this.projectParams = {
        pid: this.pinfo.pid,
      }
    },
    toBack () {
      this.$emit('toIndex');
    },
    search () {
      this.saveLoading = true
      this.init()
      this.saveLoading = false
    },
    addContract () {
      this.contractShow = true
      this.contractParams = {
        pid: this.pinfo.pid,
      }
    },
    contractInfo (cid) {
      this.contractShow = true
      this.contractParams = {
        cid: cid,
      }
    },
    itInfo (item) {
      sessionStorage.setItem("inputInfo",
        JSON.stringify({
          pid: this.pinfo.pid,
          pcode: this.pinfo.pcode,
          pname: this.pinfo.pname,
          copy_status: this.pinfo.copy_status,
          cid: item.id,
          cname: item.contract_name,
        })
      )
      this.$emit('toIt');
    },
    remove (cid) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = []
        ids.push(cid)
        this.remove1(ids)
      }).catch(() => {

      });
    },
    async remove1 (ids) {
      const res = await this.$http('inputDel', {
        level: '1',
        ids: ids,
        del_flag: '1'
      })
      this.$tips.success(res.errmsg)
      this.init()
    },
    cancel () {
      this.projectShow = false
      this.projectParams = {}
      this.contractShow = false
      this.contractParams = {}
    }
  },
  computed: {
    tableSwitch () {
      if (this.pinfo.copy_status) {
        if (this.switch && this.pinfo.copy_status != '0') {
          return this.switch
        } else {
          return false
        }
      } else {
        return this.switch
      }
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
